<template>
  <div class="dialogWrapper" v-if="show" @click="(e) => e.preventDefault()">
    <div class="overlay">
      <v-card class="dialog" :style="`{{maxWidth:${maxWidth};width:${width};}`">
        <v-card-title>提示</v-card-title>
        <v-card-text class="v-modal-content">
          <v-row class="ma-0">
            <v-col cols="12">
              <v-row class="ma-0">
                <v-col cols="2" v-show="icon" class="v-modal-icon">
                  <v-icon :color="type" :size="iconSize">{{ iconSvg }}</v-icon>
                </v-col>
                <v-col class="v-modal-inner">
                  {{ content }}
                </v-col>
              </v-row>
            </v-col>
            <v-col cols="12" v-show="mode === 'prompt'">
              <v-text-field
                :type="inputType"
                :placeholder="inputPlaceholder"
                v-model="value"
                :errorText="errorText"
                fullWidth
                @input="handleInput"
                @keydown.13="handleKeydown13(value)"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions class="justify-end">
          <v-btn text @click="handleClose(false)" v-if="mode !== 'alert'">{{
            cancelLabel
          }}</v-btn>
          <v-btn text color="primary" @click="handleClose(true)">{{
            okLabel
          }}</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </div>
</template>

<script>
import { mdiInformation } from "@mdi/js";
export default {
  data() {
    return {
      show: false,
      value: this.inputValue,
      errorText: "",
      iconSvg: mdiInformation,
    };
  },
  props: {
    title: String,
    icon: String,
    iconSize: Number,
    mode: {
      type: String,
      default: "alert",
      validator(val) {
        return ["alert", "confirm", "prompt"].indexOf(val) !== -1;
      },
    },
    type: {
      type: String,
      default: "",
      validator: (val) =>
        ["", "success", "info", "warning", "error"].indexOf(val) !== -1,
    },
    content: [String, Function],
    width: [Number, String],
    maxWidth: [Number, String],
    className: String,
    transition: String,
    beforeClose: Function,
    okLabel: String,
    cancelLabel: String,
    inputType: String,
    inputPlaceholder: String,
    inputValue: [String, Number],
    validator: Function,
  },
  methods: {
    handleClose(result) {
      if (this.beforeClose) {
        return this.beforeClose(result, this, () => this.close(result));
      }
      return this.close(result);
    },
    close(isOk) {
      if (isOk && this.mode === "prompt" && this.validator) {
        const result = this.validator(this.value);
        if (!result.valid) {
          this.errorText = result.message;
          return;
        }
        this.errorText = "";
      }
      this.open = false;
      this.$emit("close", isOk, this.value);
      return isOk;
    },
    handleKeydown13(val) {
      this.$emit("keydown13", val);
    },
    handleInput(e) {
      this.$emit("input", e);
    },
  },
};
</script>

<style lang="sass" scoped>
.ma-0
  margin: 0
.justify-end
  justify-content: flex-end
.dialogWrapper
  align-items: center
  display: flex
  height: 100%
  justify-content: center
  left: 0px
  pointer-events: none
  position: fixed
  top: 0px
  width: 100%
  z-index: 6
  pointer-events: auto
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, z-index 1ms ease 0s
  outline: none
  background-color: rgb(33, 33, 33,0.46)
  .overlay
    min-width: 70%
.v-card

.dialog
  overflow-y: auto
  pointer-events: auto
  width: 100%
  z-index: inherit
  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px
  border-radius: 4px
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s
  .overlay
    min-width: 60%
    align-items: center
    border-radius: inherit
    display: flex
    justify-content: center
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0

        // opacity: 0.46
.v-modal-icon
  display: flex
  align-items: center
</style>